<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;">
			<span>手机号：</span>
			<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入手机号" v-model="phone"></el-input>
			<span>游戏昵称：</span>
			<el-input style="width: 150px;" @keydown.enter.native="select"  clearable placeholder="请输入游戏昵称" v-model="nickName"></el-input>
			
			
			<span style="margin-left: 10px;">游戏分类：</span>
			<el-select v-model="gameTypeId" filterable  class="margin15" placeholder="请选择游戏" style="width:150px;" @change="getGameEvent(gameTypeId)">
				<el-option v-for="(item,index) in gameTypeIds" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			  <span style="margin-left: 10px;">赛事标题：</span>
			  <el-select v-model="gameEventId" filterable class="margin15" placeholder="请选择赛事标题" style="width:150px;" @change="select">
				<el-option v-for="(item,index) in gameEventIds" :key="item.index" :label="item.title" :value="item.id">
				</el-option>
			  </el-select>
			<span style="margin-left: 10px;">结算状态：</span>
			<el-select v-model="settleStatus" class="margin15" placeholder="请选择结算状态" style="width:150px;" @change="select">
				<el-option v-for="(item,index) in settleStatusnum" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			
			
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
		 fixed
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	    </el-table-column>
		<el-table-column
		 prop="nickName"
		 label="游戏昵称"
		 width="150">
		</el-table-column>
		<el-table-column
		 prop="gameNumber"
		 label="账号"
		  width="150">
		  <template slot-scope="scope">
		  		<span v-if="scope.row.area == 1">微信号:{{scope.row.gameNumber}}</span>
		  		<span v-if="scope.row.area == 2">QQ号:{{scope.row.gameNumber}}</span>
		  	</template>
		  </el-table-column>
		</el-table-column>
		<el-table-column
	  	prop="userName"
	  	label="姓名">
		<template slot-scope="scope">
		  <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.userName}}</span>
		</template>
	    </el-table-column>
		<el-table-column
		  prop="phone"
		  label="手机号"
		  width="120">
		 </el-table-column>
		<el-table-column
		 prop="gameTypeName"
		 label="游戏分类">
		 </el-table-column>
		 <el-table-column
		  prop="title"
		  label="赛事标题">
		</el-table-column>
		<el-table-column
		   prop="area"
		   label="区域">
		   <template slot-scope="scope">
		   		<span v-if="scope.row.area == 1">微信区</span>
				<span v-if="scope.row.area == 2">QQ区</span>
		   	</template>
		</el-table-column>
		<el-table-column
		  prop="tag"
		  label="标签">
		</el-table-column>
		<el-table-column
		  prop="entryMoney"
		  label="报名费">
		</el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="报名时间"
		width="160">
	    </el-table-column>
		<el-table-column
		fixed='right'
		  prop="settleStatus"
		  label="结算状态"
		  width="120">
		  <template slot-scope="scope">
		  		<span v-if="scope.row.settleStatus == 1" style="color: #3E8EF7;">待结算</span>
		  		<span v-if="scope.row.settleStatus == 2">已结算</span>
				 <span v-if="scope.row.settleStatus == null || scope.row.settleStatus == ''">未发起</span>
		  	</template>
		</el-table-column>
		<el-table-column
		  label="操作"
		  fixed='right'
		  width="100">
		  <template slot-scope="scope">
			<el-button
				size="mini"
				type="primary"
				:disabled="!isAuth('account:close')"
				v-if="scope.row.settleStatus == 1"
				@click="accounts(scope.row)">去结算
			</el-button>
			<el-button
			disabled
			size="mini"
			type="primary"
			v-if="scope.row.settleStatus == null"
			>去结算
			</el-button>
		    <el-button
		      size="mini"
		      type="primary"
			  v-if="scope.row.settleStatus == 2"
		      @click="record(scope.row)">结算记录
		    </el-button>
			<el-button
			  size="mini"
			  type="primary"
			  @click="standing(scope.row)">战绩记录
			</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[10, 15, 20, 25]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>
	  <!-- 结算 -->
	  <el-dialog title="结算操作" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">赛事标题：</span>
				<span>{{title}}</span>
			</div>
			<div style="margin-bottom: 10px;" v-if="settleImg">
				<span style="width: 200px;display: inline-block;text-align: right;">用户结算图：</span>
				<img :src="settleImg" alt="" width="180" height="180" @click="lookImg(settleImg)">
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">比赛结算图：</span>
				<img :src="gameEvent.settleImg" alt="" width="180" height="180" @click="lookImg(gameEvent.settleImg)">
			</div>
			<div style="margin-bottom: 10px;">
				<div v-for="(item,index) in awardsDate" :key="index">
					<span style="width: 200px;display: inline-block;text-align: right;">奖项：</span>
					<div style="display: inline-block;">
						<span>{{item.title}}</span>
						<span style="margin-left: 20px;">奖品:{{item.content}}</span>
					</div>
				</div>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">结算金额：</span>
				<el-input style="width:50%;"  @input="changeInput" v-model="money" placeholder="请输入结算金额"></el-input>
				<p style="padding-left: 205px;margin: 0;color: #F56C6C;font-size: 13px;">金额为0表示无奖励</p>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">胜负：</span>
				<el-radio-group v-model="victory">
				    <el-radio :label="1">胜利</el-radio>
				    <el-radio :label="2">失败</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">排名：</span>
				<el-input style="width:50%;"  v-model="ranking" placeholder="请输入排名"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">击杀数：</span>
				<el-input style="width:50%;"  v-model="killNumber" placeholder="请输入击杀数"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">死亡数：</span>
				<el-input style="width:50%;"  v-model="deathNumber" placeholder="请输入死亡数"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">助攻数：</span>
				<el-input style="width:50%;"  v-model="assistsNumber" placeholder="请输入助攻数"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="accountsNoticeTo()">确 定</el-button>
			</div>
	  </el-dialog>
	  <!-- 结算记录 -->
	  <el-dialog title="结算记录" :visible.sync="dialogFormVisible1" center>
			<div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">结算内容：</span>
					<span>{{recordata.content}}</span>
				</div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">结算明细：</span>
					<span>{{recordata.title}}</span>
				</div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">结算金额：</span>
					<span>{{recordata.money}}</span>
				</div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">结算时间：</span>
					<span>{{recordata.createTime}}</span>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
			</div>
	  </el-dialog>
	  <!-- 战绩记录 -->
	  <el-dialog title="战绩记录" :visible.sync="dialogFormVisible2" center>
		<div >
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">胜负：</span>
				<span v-if="standingdata.victory == 1">胜利</span>
				<span v-if="standingdata.victory == 2">失败</span>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">排名：</span>
				<span>{{standingdata.ranking}}</span>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">击杀数：</span>
				<span>{{standingdata.killNumber}}</span>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">死亡数：</span>
				<span>{{standingdata.deathNumber}}</span>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">助攻数：</span>
				<span>{{standingdata.assistsNumber}}</span>
			</div>
		</div>
	  </el-dialog>
	  <!-- 图片放大 -->
	  <el-dialog :visible.sync="dialogFormVisible3"  width="50%" style="text-align: center;">
	  		<img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
	  </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:10,
				page:1,
				phone:'',
				gameTypeId:'',
				gameEventId:'',
				gameEventIds:[],
				gameTypeIds:[],
				gameEvent:{},
				title:'',
				settleImg:'',
				money:'',
				id:'',
				userId:'',
				area:'',
				lookimg:'',
				victory:1,
				ranking:0,
				killNumber:0,
				deathNumber:0,
				assistsNumber:0,
				awardsDate:[],
				recordata:{},
				standingdata:{},
				gameApply:{},
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				dialogFormVisible2:false,
				dialogFormVisible3:false,
				typeDatas:[],
				settleStatus:0,
				nickName:'', //游戏昵称
				settleStatusnum:[
					{
						label:'全部',
						value:0
					},
					{
						label:'待结算',
						value:1
					},
					{
						label:'已结算',
						value:2
					}
				]
			}
		},
		methods: {
			changeInput() {
			      var pattern = /^[0-9][0-9]*$/ // 正整数的正则表达式
			      // 不符合正整数时
			      if (!pattern.test(this.money)) {
			        // input 框绑定的内容为空
			        this.money = ''
			      }
			},
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 查询
			select(){
				this.page = 1
				this.size = 10
				this.dataSelect()
			},
			// 重置
			cleans(){
				this.phone = ''
				this.gameTypeId = ''
				this.gameEventId = ''
				this.settleStatus = 0
				this.dataSelect()
			},
			// 详情跳转
			updates (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.userId}})
			},
			// 图片放大
			lookImg(item){
				this.dialogFormVisible3 = true
				this.lookimg = item
			},
			// 去结算
			accounts(row){
				this.id = row.id
				this.area = row.area
				this.title = row.title
				this.settleImg = row.settleImg
				this.awards(row.id)
				this.dialogFormVisible = true
			},
			// 结算操作
			accountsNoticeTo(){
				if (this.money == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入结算金额',
						type: 'warning'
					});
					return
				}
				this.$http({
				  url: this.$http.adornUrl2('/gameApply/addUserMoney'),
				  method: 'post',
				  data: this.$http.adornData({
					  "assistsNumber": this.assistsNumber,
					  "deathNumber": this.deathNumber,
					  "gameApplyId": this.id,
					  "killNumber":this.killNumber,
					  "money": this.money,
					  "ranking":this.ranking,
					  "victory":this.victory
				  })
				}).then(({data}) => {
				  this.$message({
					message: '操作成功',
					type: 'success',
					duration: 1500,
					onClose: () => {
					  this.dialogFormVisible = false
					  this.assistsNumber = 0
					  this.deathNumber = 0
					  this.killNumber = 0
					  this.money = ''
					  this.ranking = 0
					  this.victory = 1
					  this.settleStatus = 0
					  this.dataSelect()
					}
				  })
				})
			},
			// 结算记录
			record(row){
				if (row.userMoneyDetailsId == null || row.userMoneyDetailsId == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '结算金额为0,无记录',
				        type: 'warning'
				    });
				    return
				}else{
					this.dialogFormVisible1 = true
					this.$http({
					  url: this.$http.adornUrl2('/userMoney/find'),
					  method: 'get',
					  params: this.$http.adornParams({
						  'id':row.userMoneyDetailsId,
					  })
					}).then(({data}) => {
						if(data.status == 0){
							let returnData = data.data
							this.recordata = returnData
						}
					})
				}
			},
			// 战绩记录
			standing(row){
				this.$http({
				  url: this.$http.adornUrl2('/gameRecord/list'),
				  method: 'get',
				  params: this.$http.adornParams({
					  'page':0,
					  'size':1,
					  'userId':row.userId,
					  'gameTypeId':row.gameTypeId,
					  'gameEventId':row.gameEventId,
					  'gameApplyId':row.id
				  })
				}).then(({data}) => {
					if(data.status == 0){
						let returnData = data.data
						if(returnData.content.length==0){
							this.$message({
								message: '暂无战绩',
								type: 'success',
								duration: 1500,
							})
						}else{
							this.dialogFormVisible2 = true
							this.standingdata = returnData.content[0]
							this.gameApply = returnData.content[0].gameApply
						}
						
					}else{
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			},
			// 获取奖项
			awards(id){
				this.$http({
				  url: this.$http.adornUrl2('/gameApply/find'),
				  method: 'get',
				  params: this.$http.adornParams({
					  'id':id
				  })
				}).then(({data}) => {
				  let returnData = data.data
				  this.awardsDate = returnData.gameAwardList
				  this.gameEvent = returnData.gameEvent
				  this.userId = returnData.userId
				})
			},
			// 获取游戏分类
			gameClass(){
				this.$http({
				  url: this.$http.adornUrl2('/gameType/result'),
				  method: 'get',
				  params: this.$http.adornParams({
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameTypeIds = returnData
				})
			},
			  // 获取进行中的赛事
			  getGameEvent(gameTypeId){
				this.gameEventId = '';
				this.dataSelect()
				this.$http({
				  url: this.$http.adornUrl2('/gameEvent/startGame'),
				  method: 'get',
				  params: this.$http.adornParams({
					'gameTypeId':gameTypeId,
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameEventIds = returnData
				})
			},
			// 获取进行中的赛事
			  getGameEvent2(gameTypeId){
				this.$http({
				  url: this.$http.adornUrl2('/gameEvent/startGame'),
				  method: 'get',
				  params: this.$http.adornParams({
					'gameTypeId':gameTypeId,
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameEventIds = returnData
				})
			},
			// 获取分类数据
			dataSelect2 () {
			  let gameTypeId = this.$route.query.gameTypeId
			  let gameEventId = this.$route.query.gameEventId
			  this.gameTypeId = gameTypeId
			  this.gameEventId = gameEventId
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/gameApply/applyList'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'phone':this.phone,
					'settleStatus':this.settleStatus,
					'gameTypeId':this.gameTypeId,
					'gameEventId':this.gameEventId,
					'nickName':this.nickName
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			},
			// 获取分类数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  console.log(this.nickName + 'nickName');
			  this.$http({
				url: this.$http.adornUrl2('/gameApply/applyList'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'phone':this.phone,
					'settleStatus':this.settleStatus,
					'gameTypeId':this.gameTypeId,
					'gameEventId':this.gameEventId,
					'nickName':this.nickName
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			}
		},
		mounted() {
			this.gameClass()
			let gameTypeId = this.$route.query.gameTypeId
			this.getGameEvent2(gameTypeId)
			if(gameTypeId>0){
				this.dataSelect2()	
			}else{
				this.dataSelect()
			}
		}
	  };
</script>

<style scoped>
	.el-button+.el-button{
		margin-left: 0;
		margin-top: 5px;
	}
</style>
